<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>充值</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
            body{background:#FFF;}
            #container{
                padding:0 0.46rem;
                padding-top:0.2rem;
            }
          .sureMoney{
            background:linear-gradient(to right,#ff2626 0%,#fd6e1f 70%);
            color:#FFF;
            width:100%;
            display: block;
            height:1rem;
            line-height:1rem;
            text-align:center;
            font-size:0.31rem;
            border-radius:3rem;
            margin:0.85rem 0;
          }
          .recharge{
            margin-top:0.2rem;
          }
          .recharge h3{
            color:#616161;
            height:0.7rem;
            line-height:0.7rem;
            font-weight:normal;
          }
          .recharge .inputMoney{
            position:relative;
            margin-top:0.1rem;
            border-bottom:1px solid #F6F6F6;
          }
          .recharge .inputMoney span{
            color:#2F2F2F;
            position:absolute;
            left:0;
            top:0;
            height:1.3rem;
            width:0.6rem;
            line-height:1.34rem;
            font-size:0.5rem;
            font-weight:normal;
          }
          .recharge .inputMoney input{
            margin:0;
            padding:0.4rem 0;
            padding-left:0.65rem;
            line-height:0.5rem;
            display:block;
            width:100%;
            font-size:0.6rem;
            color:#2F2F2F;
            height:1.3rem;
          }

          .selectPayType{
            border-radius: 0.5rem 0.5rem 0 0;
            position:fixed;
            bottom:0%;
            left:0;
            width:100%;
            z-index:1001;
            background:#FFF;
            animation: show 0.3s;
          }
          .selectPayType.hide{
              animation: hide 0.3s;
          }
          @keyframes hide {
          	0%{
          	    bottom:0;
          	}
          	100% {
          		bottom:-100%;
          	}
          }
          @keyframes show {
          	0%{
          	    bottom:-100%;
          	}
          	100% {
          		bottom:0%;
          	}
          }

          .shadow{
              animation: shadeShow 0.2s;
          }
          .shadow.hide{
              animation: shadeHide 0.2s;
          }
          @keyframes shadeShow {
          	0%{
          	    opacity: 0;
          	}
          	100% {
          		opacity: 1;
          	}
          }
          @keyframes shadeHide {
          	0%{
          	    opacity: 1;
          	}
          	100% {
          		opacity: 0;
          	}
          }
          .selectPayType .selectPay_title{
            text-align:center;
            font-size:0.35rem;
            font-weight:normal;
            color:#000;
            height:1.7rem;
            line-height:1.5rem;
            width:100%;
            position:relative;
          }
          .selectPayType .selectPay_title img{
            position:absolute;
            right:7%;
            top:0.63rem;
            width:0.31rem;
            height:0.31rem;
          }
          .selectPayType .sureMoney{
            width:86%;
            margin:0 auto;
            margin-top:0.7rem;
            margin-bottom:0.8rem;
          }
          .selectPayType .selectPay_content{
            padding:0 5%;
          }
          .selectPayType .selectPay_content>div{
            font-size:0.31rem;
            color:#535353;
            height:0.65rem;
            margin-bottom:0.52rem;
            line-height:0.65rem;
          }
          .selectPayType .selectPay_content>div:nth-last-child(1){
            margin-bottom:0;
          }
          .selectPayType .selectPay_content>div .icon{
            margin-right:0.3rem;
            width:0.65rem;
            height:0.65rem;
            vertical-align: middle;
            margin-top:-0.05rem;
          }
          .selectPayType .selectPay_content>div .check{
            float:right;
            width:0.38rem;
            height:0.38rem;
            margin-top:0.135rem;
          }

          // 设置input placeholder默认样式
          input::-webkit-input-placeholder {
            font-size: 13px;
          }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div id="container" v-if="!load">
            <div class="recharge">
                <h3>充值金额</h3>
                <div class="inputMoney">
                    <span>￥</span>
                    <input v-model="money" type="number" />
                </div>
                <button class="sureMoney" @click="onNextStep">下一步</button>
            </div>

            <template v-if="showSelect">
                <div class="shadow" @click="hideType()"></div>
                <div class="selectPayType">
                    <div class="selectPay_title">
                        选择支付方式<img src="../../../image/icons/close.png" @click="hideType()">
                    </div>
                    <div class="selectPay_content">
                        <div @click="selectType(1)">
                            <img src="../../../image/my/wechatPay.png" class="icon" />
                            微信
                            <img v-if="payType==1" src="../../../image/icons/checked_hover.png" class="check" />
                            <img v-else src="../../../image/icons/checked.png" class="check" />
                        </div>
                        <div @click="selectType(2)">
                            <img src="../../../image/my/alipay.png" class="icon" />
                            支付宝
                            <img v-if="payType==2" src="../../../image/icons/checked_hover.png" class="check" />
                            <img v-else src="../../../image/icons/checked.png" class="check" />
                        </div>
                    </div>
                    <button class="sureMoney" @click="goPay">前去支付</button>
                </div>
            </template>
        </div>
		<template v-else>
		    <div class="loadFull whiteBg">
		        <div class="se-loading"></div>
		    </div>
		</template>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var wxPayPlus = api.require('wxPayPlus');
            var aliPayPlus = api.require('aliPayPlus');

            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    showSelect:false,
                    money: '',
                    minRecharge: 10000,
                    payType: 1,
					load:true,
                },
                methods:{
                    showType: function(){
                        var that = this;
                        that.showSelect = true;
                    },
                    hideType: function(){
                        var that = this;
                        document.querySelector(".selectPayType").classList.add('hide');
                        document.querySelector(".shadow").classList.add('hide');
                        setTimeout(function(){
                            that.showSelect = false;
                            document.querySelector(".selectPayType").classList.remove('hide');
                            document.querySelector(".shadow").classList.remove('hide');
                        },200);
                    },
                    selectType: function(type){
                        this.payType = type;
                    },
                    getMinRecharge: function(){
                        var _this = this;
                        $.ajax({
                            url: '/get/config?key=minRecharge',
                            method: 'get',
                            success: function(res){
								_this.load = false;
                                _this.minRecharge = res.data.minRecharge;
                            }
                        });
                    },
                    onNextStep: function(){
                        var _this = this;
                        if(this.money == ''){
                            $.toast('请输入充值金额');
                            return false;
                        }
                        if($.yuanToSys(_this.money) < _this.minRecharge){
                            $.toast('充值金额不能低于'+$.parsePrice(_this.minRecharge, 2)+'元');
                            return false;
                        }
                        this.showType();
                    },
                    goPay: function(){
                        this.hideType();
                        if(this.payType == 1){
                            this.payByWeixin();
                            return false;
                        }
                        if(this.payType == 2){
                            this.payByAlipay();
                            return false;
                        }
                    },
                    payByWeixin: function(){
                        var _this = this;
                        $.ajax({
                            url: '/recharge/weixin/request',
                            method: 'post',
                            load: true,
                            data: {amount: $.yuanToSys(_this.money)},
                            success: function(res){
                                var data = res.data.transaction_data;
                                wxPayPlus.payOrder({
                                    apiKey: data.appid,
                                    orderId: data.prepayid,
                                    mchId: data.partnerid,
                                    nonceStr: data.noncestr,
                                    timeStamp: data.timestamp,
                                    package: data.package,
                                    sign: data.sign
                                }, function(ret, err) {
                                    if (ret.status) {
                                        //支付成功
                                        api.sendEvent({name: 'updateWalletPage'});
                                        api.sendEvent({name: 'updateMyIndexPage'});
                                        api.closeWin();
                                    }
                                });
                            }
                        });
                    },
                    payByAlipay: function(){
                        var _this = this;
                        $.ajax({
                            url: '/recharge/alipay/request',
                            method: 'post',
                            load: true,
                            data: {amount: $.yuanToSys(_this.money)},
                            success: function(res){
                                var data = res.data.transaction_data;
                                aliPayPlus.payOrder({
                                    orderInfo: data
                                }, function(ret, err) {
                                    var code = ret.code;
                                    if(code == 9000){
                                        api.sendEvent({name: 'updateWalletPage'});
                                        api.sendEvent({name: 'updateMyIndexPage'});
                                        api.closeWin();
                                        return ;
                                    }
                                    if(code == 6001){
                                        return false;
                                    }
                                    if(code == 6002){
                                        $.toast('网络连接出错');
                                        return false;
                                    }
                                    $.toast('订单支付失败');
                                });
                            }
                        });
                    },
                },
                mounted(){
					$.initJs(this);
                    this.getMinRecharge();
                }
            });
        }
    </script>
</body>
</html>
